<template>
  <div class="person">
    <h1>你好啊</h1>
    <h1>姓名：{{ name }}</h1>
    <h1>年龄：{{ age }}</h1>
    <button @click="showTel">查看联系方式</button>
    <button @click="changeName">改名</button>
    <button @click="changeAge">年龄增加</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Person',
  setup() {
    console.log('@@', this) // setup 函数中的 this 是 undefined

    let name = '张山' // 注意此时的 name 不是响应式的
    let age = 20 // 注意此时的 age 不是响应式的
    let tel = '13512345678' // 注意此时的 tel 不是响应式的

    function changeName() {
      name = 'zhang -san' // 注意，这样修改 name, 虽然 name 的值变了，但是页面上不会变化，原因是 name 不是响应式的
    }

    function changeAge() {
      age += 1 // 注意，这样修改 age, 虽然 age 的值变了，但是页面上不会变化，原因是 age 不是响应式的
    }

    function showTel() {
      alert(tel)
    }

    return { name, age, tel, changeAge, changeName, showTel }

    // setup 函数的返回值也可以是一个 渲染函数
    // return () => '哈哈'
  },
}
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 10px;
}
button {
  margin: 0 5px;
}
</style>
